---
title: Shine Border
date: 2024-05-25
description: Shine border is an animated background border effect.
author: nyxb
published: true
---

<ComponentPreview 
name="shine-border-demo"
description="Shine border is an animated background border effect."
 />

## Installation

<Tabs defaultValue="cli">

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx nyxb@latest add shine-border
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="shine-border" />

<Step>Update the import paths to match your project setup.</Step>

<Step>Update `tailwind.config.js`</Step>

Add the following animations to your `tailwind.config.js` file:

```js title="tailwind.config.js" {5-14}
/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      animation: {
        shine: "shine var(--duration) infinite linear",
      },
      keyframes: {
        shine: {
          "0%": {
            "background-position": "0% 0%",
          },
          "50%": {
            "background-position": "100% 100%",
          },
          to: {
            "background-position": "0% 0%",
          },
        },
      },
    },
  },
};
```

</Steps>

</TabsContent>

</Tabs>

## Examples

### Monotone

<ComponentPreview name="shine-border-demo-2" />

## Props

| Prop           | Type        | Default   | Description                                                         |
| -------------- | ----------- | --------- | ------------------------------------------------------------------- |
| `className`    | `string`    | `-`       | The class name to be applied to the component.                      |
| `duration`     | `number`    | `14`      | Defines the animation duration to be applied on the shining border. |
| `color`        | `string`    | `#FFFFFF` | Defines the color of the border.                                    |
| `borderRadius` | `number`    | `8`       | Defines the radius of the border.                                   |
| `borderWidth`  | `number`    | `1`       | Defines the width of the border.                                    |
| `children`     | `ReactNode` | `{}`      | Contains react node elements.                                       |
